<template>
  <el-row :gutter="24" style="margin: 32px 0;">
    <!-- 欢迎区 -->
    <el-col :span="24">
      <el-card shadow="hover" style="border-radius: 16px; display: flex; align-items: center; justify-content: space-between;">
        <div>
          <h2 style="margin-bottom: 8px;">欢迎来到 Baidu 智能平台！</h2>
          <p style="color: #888;">在这里你可以管理项目、数据、模型，体验丰富的AI工具。</p>
        </div>
        <el-avatar size="large" icon="el-icon-user" />
      </el-card>
    </el-col>
  </el-row>

  <!-- 快捷入口区 -->
  <el-row :gutter="24" style="margin-bottom: 32px;">
    <el-col :span="6" v-for="entry in entries" :key="entry.title">
      <el-card shadow="hover" style="border-radius: 16px; text-align: center; cursor: pointer;" @click="$router.push(entry.path)">
        <el-icon style="font-size: 36px; color: #409EFF; margin-bottom: 8px;">
          <component :is="entry.icon" />
        </el-icon>
        <div style="font-size: 18px; font-weight: bold;">{{ entry.title }}</div>
        <div style="color: #888;">{{ entry.desc }}</div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 统计区 -->
  <el-row :gutter="24" style="margin-bottom: 32px;">
    <el-col :span="6" v-for="stat in stats" :key="stat.label">
      <el-card shadow="hover" style="border-radius: 16px; text-align: center;">
        <div style="font-size: 32px; font-weight: bold; color: #409EFF;">{{ stat.value }}</div>
        <div style="color: #888;">{{ stat.label }}</div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 最新动态区 -->
  <el-row :gutter="24">
    <el-col :span="12">
      <el-card shadow="hover" style="border-radius: 16px;">
        <h3>最新项目</h3>
        <el-timeline>
          <el-timeline-item v-for="item in latestProjects" :key="item" color="#409EFF">{{ item }}</el-timeline-item>
        </el-timeline>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card shadow="hover" style="border-radius: 16px;">
        <h3>社区动态</h3>
        <el-timeline>
          <el-timeline-item v-for="item in latestCommunity" :key="item" color="#67C23A">{{ item }}</el-timeline-item>
        </el-timeline>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { User, Tools, Cpu, Folder, DataAnalysis, Collection, Histogram, ChatDotRound } from '@element-plus/icons-vue'

const entries = [
  { title: '个人中心', desc: '管理个人信息', path: '/profile', icon: User },
  { title: '工具箱', desc: '丰富的AI工具', path: '/toolbox', icon: Tools },
  { title: '开发者', desc: 'API调试与开发', path: '/developer', icon: Cpu },
  { title: '我的项目', desc: '项目管理与协作', path: '/projects', icon: Folder },
  { title: '数据', desc: '数据管理与分析', path: '/data', icon: DataAnalysis },
  { title: '数据库', desc: '数据库管理', path: '/database', icon: Collection },
  { title: '模型库', desc: 'AI模型管理', path: '/models', icon: Histogram },
  { title: '社区', desc: '交流与分享', path: '/community', icon: ChatDotRound }
]

const stats = [
  { label: '项目总数', value: 12 },
  { label: '数据集', value: 34 },
  { label: '模型数量', value: 7 },
  { label: '社区帖子', value: 21 }
]

const latestProjects = [
  '项目A 刚刚创建',
  '项目B 更新了成员',
  '项目C 发布了新版本'
]

const latestCommunity = [
  '用户张三发布了新帖',
  '模型经验分享区有新回复',
  '官方公告：平台升级'
]
</script>
